<template>
  <div class="boxnews">
    <!-- 头部 -->
    <div class="hearde">
      <span
        @click="$router.go(-1)"
        class="iconfont icon-arrowRight-copy-copy"
      ></span>
      <div>消息中心</div>
    </div>
    <div class="br"></div>
    <div v-show="flas" class="news">
      <ul>
        <li v-for="(item, index) in lists" :key="index">{{ item.name }}</li>
      </ul>
    </div>
    <div v-show="!flas" class="newss">
      <span class="iconfont icon-zanwuxiaoxi-"></span>
      <div>暂无消息</div>
    </div>
    <div class="bh"></div>
    <footers></footers>
  </div>
</template>

<script>
import footers from "../components/base/footers.vue";
export default {
  components: { footers },
  data() {
    return {
      lists: [],
      flas: null,
    };
  },
  created() {
    if (this.lists.length >= 1) {
      this.flas = true;
    } else if (this.lists.length == 0) {
      this.flas = false;
    }
  },
};
</script>

<style lang="less">
.boxnews {
  .hearde {
    background-color: white;
    display: flex;
    align-items: center;
    padding: 12px 0px;
    width: calc(100% - 16px);
    padding-left: 16px;
    color: #33373d;
    font-size: 16px;
    margin-bottom: 12px;
    span {
      margin-right: 10px;
    }
    div {
      font-size: 14px;
    }
  }
  .br {
    width: 100%;
    height: 12px;
    border-bottom: 1px solid #f1f0f0;
  }
  .news {
    text-align: center;
    width: 100%;
    min-height: 400px;
  }
  .newss {
    text-align: center;
    width: 100%;
    min-height: 400px;
    display: flex;
        align-items: center;
    justify-content: center;
    flex-direction: column;
    span{
      color: #C0C5CC;
      font-size: 50px;
    }
    div{
      color: #C0C5CC;
      font-size: 14px;
    }
  }
  .bh {
    width: 100%;
    height: 105px;
    background-color: white;
  }
}
</style>